<template>
  <div>
    <label-order-alert v-if="data.labelOrder && data.labelOrder.status !== 2"></label-order-alert>

    <el-card class="header-card">
      <div class="item">
        <p>{{$t('table.store')}}：{{data.accountName}}</p>
        <p>{{ $t('table.调货单号') }}：{{ data.workNo }}</p>
        <p v-if="data.labelOrder">{{$t('table.贴标单号')}}：{{data.labelOrder.labelNo}}</p>
        <p class="">{{$t('table.工单状态')}}：{{ getTransferStatusStr(data.status) }}</p>
        <p class="">{{ $t('table.工单类型') }}：{{ getTransferTypeStr(data.type) }}</p>
        <p class="" v-if="data.labelOrder">{{$t('table.贴标状态')}}：{{ getLabelStatusStr(data.labelOrder.status) }}</p>
        <p>
          <span>{{$t('table.createTime2')}}：{{ data.createTime }}</span>
          <span class="mgl20" v-if="data.finishTime">{{$t('table.完成时间')}}：{{ data.finishTime }}</span>
        </p>
        <p>
          {{$t('table.箱子数量')}}：{{ data.boxNum }}
        </p>
        <p>
          {{$t('table.预计调货SKU（种）')}}: {{ data.exSkuNum }}
          <span class="mgl20" v-if="data.status === 2">
            {{$t('table.实际调货SKU（种）')}}: {{ data.exSkuNum }}
          </span>
        </p>
        <p>
          {{ $t('table.预计调货商品总数') }}: {{ data.exGoodsNum }}
          <span class="mgl20" v-if="data.status === 2">
            {{ $t('table.实际调货商品总数') }}: {{ data.rlGoodsNum }}
          </span>
        </p>
       <!-- <p>
          <span>{{$t('table.预计调货费用（元）')}}：{{ data.exTotalTransferFee }}</span>
          <span class="mgl20" v-if="data.status >= 2">{{$t('table.实际调货费用（元）')}}：{{ data.rlTotalTransferFee }}</span>

        </p>
        <p v-if="data.labelOrder">
          <span>{{$t('table.预计贴SKU标费用（元）')}}：{{ data.labelOrder.exTotalLabelFee }}</span>
          <span class="mgl20" v-if="data.labelOrder.status === 2">{{$t('table.实际贴SKU标费用（元）')}}：{{ data.labelOrder.rlTotalLabelFee }}</span>
        </p>
        <p>
          <span>{{$t('table.预计总费用（元）')}}：{{ data.exTotalFee }}</span>
          <span class="mgl20" v-if="data.status === 2">{{$t('table.实际总费用（元）')}}：{{data.rlTotalFee}}</span>
        </p> -->
      </div>
      <div class="button">
        <div v-if="data.labelOrder">
          <el-button type="primary" @click="jumpLabelOrderInfo(data.labelOrder.id, true)">{{$t('labelOrder.贴标工单')}}</el-button>
        </div>
      </div>
    </el-card>
    <div class="mgt20">
      <h4>{{ $t('middle.费用信息') }}</h4>
      <el-table :data="exFee" border style="width: 100%">
        <el-table-column prop="exTransferFee" label="调货费用（元)" min-width="180" align="center">
          <template>
            <span v-if="data.status === 2" >{{ data.rlTotalTransferFee }}</span>
            <span v-else>{{ data.exTotalTransferFee }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="data.labelOrder" prop="exTotalFee" label="贴SKU标费用（元)" min-width="180" align="center">
          <template>
            <span class="mgl20" v-if="data.labelOrder.status === 2">{{ data.labelOrder.rlTotalLabelFee }}</span>
            <span v-else>{{ data.labelOrder.exTotalLabelFee  }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="exTotalFee" :label="$t('table.总费用（元）')" min-width="180" align="center">
          <template>
            <span v-if="data.status === 2" style="margin-left: 10px">{{ data.rlTotalFee }}</span>
            <span style="margin-left: 10px" v-else>{{ data.exTotalFee }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
<!--      <div v-if="straightGoods.length > 0">
        <h4>{{ $t('transfer.无需贴标调货商品详细情况') }}：</h4>
        <el-table
          :data="straightGoods"
          row-key="id"
          border
          style="width: 1700px"
        >
          <el-table-column
            :label="$t('table.productCover')"
            align="center"
            width="120"
            fixed="left"
          >
            <template slot-scope="{row}">
              <div class="img-box img-one">
                <img :src="row.image" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.title')"
            align="left"
            min-width="300"
          >
            <template slot-scope="{row}">
              {{row.title}}
              <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.当前店铺的Listing ID与SKU')"
            align="left"
            min-width="300"
          >
            <template slot-scope="{row}">
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </el-table-column>
          <m-l-code-column></m-l-code-column>
          <el-table-column
            :label="$t('table.调出店铺Listing ID与SKU')"
            align="left"
            min-width="300"
            v-if="false"
          >
            <template slot-scope="{row}">
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </el-table-column>

          <el-table-column
            prop="inventoryLocation"
            align="center"
            :label="$t('table.inventoryLocation.存放库位')"
            min-width="160"
          >
            <template v-slot="{row}">
              <template v-if="row.inventoryLocationStr === ''">
                -
              </template>
              <template v-else>
                {{row.inventoryLocationStr}}
              </template>
            </template>
          </el-table-column>


          <template v-if="data.type === 2">
            <el-table-column
              :label="$t('table.预计从一件代发调出')"
              align="center"
              width="200"
              prop="exGoodsNum"
            >
              <template v-slot="{row}">
                <div
                  v-for="(item,index) in row.stockBoxInfo"
                  :key="index"
                >
                  {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                </div>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.预计从中转送仓调出')"
              align="center"
              width="200"
              prop="exGoodsNum"
            >
              <template v-slot="{row}">
                <div
                  v-for="(item,index) in row.middleBoxInfo"
                  :key="index"
                >
                  {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                </div>
              </template>
            </el-table-column>
          </template>
          <template v-if="labelFinish">
            <el-table-column
              :label="$t('table.实际调入商品总数')"
              align="center"
              width="200"
              prop="rlGoodsNum"
            >
              <template v-slot="{row}">
                <template v-if="data.status === 2">
                  <span :class="[row.rlGoodsNum !== row.exGoodsNum ? 'font-red' : '']">{{row.rlGoodsNum}}</span>
                </template>
                <template v-else>
                  <el-input-number
                    :step="1"
                    :precision="0"
                    :min="0"
                    v-model="row.rlGoodsNum"
                  >
                  </el-input-number>
                </template>
              </template>
            </el-table-column>
            <template v-if="data.status === 1">
              <el-table-column
                :label="$t('table.operate')"
                align="center"
                width="100"
              >
                <template v-slot="{row}">
                  <el-button :type="row.save ? 'warning' : 'primary'" @click="saveGoodsNum(row)">
                    {{ $t('common.save') }}
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </template>




        </el-table>
      </div> -->


      <div v-if="GoodsList.length > 0">
        <h4>贴标调货商品详情：</h4>
        <el-table
          :data="GoodsList"
          row-key="id"
          border
          :span-method="objectSpanMethod1"
        >
          <el-table-column
            :label="$t('table.productCover')"
            align="center"
            width="120"
            fixed="left"
            prop="image"
          >
            <template slot-scope="{row}">
              <div class="img-box img-one">
                <img :src="row.image" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.title')"
            align="left"
            min-width="300"
            prop="title"
          >
            <template slot-scope="{row}">
              {{row.title}}
              <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.当前店铺的Listing ID与SKU')"
            align="left"
            min-width="300"
            prop="toGoodsId"
          >
            <template slot-scope="{row}">
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </el-table-column>
          <!-- <m-l-code-column></m-l-code-column> -->
          <el-table-column
            label="产品标"
            align="left"
            min-width="200"
            prop="fromGoodsId"
          >
            <template v-slot="{row}">
              <template v-if="row.fromGoodsIsTB">
                {{$t('shipment.Not labeled')}}
              </template>
              <template v-else-if="row.fromGoodsIsSystem">
                <!-- {{$t('shipment.System label')}} -->
                {{row.sku}}
              </template>
              <template v-else>
                {{row.inventoryId}}
              </template>
            </template>
          </el-table-column>

         <!-- <el-table-column
            prop="inventoryLocation"
            align="center"
            :label="$t('table.inventoryLocation.存放库位')"
            min-width="160"
          >
            <template v-slot="{row}">
              <template v-if="row.inventoryLocationStr === ''">
                -
              </template>
              <template v-else>
                {{row.inventoryLocationStr}}
              </template>
            </template>
          </el-table-column>

          <m-l-code-column prop="fromInventoryId" :label="$t('table.调出MLCode')"></m-l-code-column> -->
         <el-table-column
            :label="$t('table.预计从一件代发调出')"
            align="center"
            width="200"
            prop="exOneStock"
            v-if="data.type==2"
          >
            <template v-slot="{row}">
              <template v-if="row.stockBoxInfo.length === 0"> - </template>
              <template v-else>
                <div
                  v-for="(item,index) in row.stockBoxInfo"
                  :key="index"
                >
                  {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.预计从中转送仓调出')"
            align="center"
            width="200"
            prop="exMiddleStock"
            v-if="data.type==1"
          >
            <template v-slot="{row}">
              <template v-if="row.middleBoxInfo.length === 0"> - </template>
              <template v-else>
                <div
                  v-for="(item,index) in row.middleBoxInfo"
                  :key="index"
                >
                  {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
                </div>
              </template>
            </template>
          </el-table-column>
<!--          <template v-if="labelFinish">
            <el-table-column
              :label="$t('table.实际从一件代发调出')"
              align="center"
              width="200"
              prop="rlOneStock"
            >
            </el-table-column>
            <el-table-column
              :label="$t('table.实际从中转送仓调出')"
              align="center"
              width="200"
              prop="rlMiddleStock"
            >
            </el-table-column>
          </template> -->

          <el-table-column
            :label="$t('table.预计调入商品总数量')"
            align="center"
            width="200"
            prop="exGoodsNum"
          >
          </el-table-column>
         <!-- <template v-if="labelFinish">
            <el-table-column
              :label="$t('table.实际调入商品总数')"
              align="center"
              width="200"
              prop="rlTotalGoodsNum"
            >
              <template v-slot="{row}">
                <span :class="row.exTotalGoodsNum === row.rlTotalGoodsNum ? '' : 'font-red'">{{row.rlTotalGoodsNum}}</span>
              </template>
            </el-table-column>
          </template> -->
          <template v-if="labelFinish">
            <el-table-column
              :label="$t('table.实际调入商品总数')"
              align="center"
              width="200"
              prop="rlGoodsNum"
            >
              <template v-slot="{row}">
                <template v-if="data.status === 2">
                  <span :class="[row.rlGoodsNum !== row.exGoodsNum ? 'font-red' : '']">{{row.rlGoodsNum}}</span>
                </template>
                <template v-else>
                  <el-input-number
                    :step="1"
                    :precision="0"
                    :min="0"
                    v-model="row.rlGoodsNum"
                  >
                  </el-input-number>
                </template>
              </template>
            </el-table-column>
            <template v-if="data.status === 1">
              <el-table-column
                :label="$t('table.operate')"
                align="center"
                width="100"
              >
                <template v-slot="{row}">
                  <el-button :type="row.save ? 'warning' : 'primary'" @click="saveGoodsNum(row)">
                    {{ $t('common.save') }}
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </template>


        </el-table>
      </div>

      <div class="mgt10" style="font-size: 13px" v-if="data.status === 1">
        <div class="font-red">{{ $t('transfer.如若实际调货商品数量与预计调货商品数量有差异，请先与用户沟通确认') }}</div>
        <div class="font-grey">{{ $t('transfer.单独保存SKU后，当前工单仍会是待调货工单，请通过底部「确认调货」按钮确认调货完成') }}</div>
      </div>


    </div>

    <div class="remark">
      <h4>{{$t('shipment.step4Text10')}}：</h4>
      <el-input type="textarea" style="width: 1500px" :placeholder="$t('shipment.step4Text11')" v-model="data.remark"></el-input>
    </div>

  </div>
</template>

<script>
import {jumpLabelOrderInfo} from "@/utils/jumpView";
import {saveTransferGoodsNum} from "@/api/transferWork";
import {getTransferStatusStr, getTransferTypeStr} from "@/utils/transferWork";
import {getLabelStatusStr} from "../../../utils/labelOrder";
// import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import LabelOrderAlert from "@/views/labelOrder/components/LabelOrderAlert.vue";

export default {
  name: "TransferInfoView",
  components: {LabelOrderAlert},
  props:{
    data: {
      type: Object,
      required: true,
    },
    straightGoods: {
      type: Array,
      required: true,
    },
    GoodsList: {
      type: Array,
      required: true,
    },
    distributionGoodsList:{
      type: Array,
      required: true,
    },
    // 硬件模式
    HWMode:{
      type: Boolean,
      default: false,
    }
  },
  computed:{
    canEdit(){
      return this.data.status === 1 && this.labelFinish
    },
    labelFinish(){
      return !this.data.labelOrder || this.data.labelOrder.status === 2
    }
  },
  data(){
    return {
      dialog: false,
      dialogGoods: {
        otherGoods: [],
      },
      exFee: [{ exTotalFee: 0, exTotalLabelFee: 0, exTransferFee: 0 }],
    }
  },
  methods: {
    getLabelStatusStr,
    getTransferTypeStr,
    getTransferStatusStr,
    jumpLabelOrderInfo,
    saveGoodsNum(row){
      // 保存当前商品数量
      const data = {
        id: row.id,
        transferId: this.data.id,
        rlGoodsNum: row.rlGoodsNum ? row.rlGoodsNum : 0,
      }
      saveTransferGoodsNum(data)
        .then(res=>{
          row.save = true
          this.$successMessage(res.message)
        })
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.mergeCell1()
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    mergeCell1(){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'toGoodsId',
        'needDistributionNum',
        'operate',
        'totalRlGoodsNum',
        'exTotalGoodsNum',
        'rlTotalGoodsNum',
        'inventoryId',
        'inventoryLocation',
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.GoodsList.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并
        if(item.toSuitListId && item.toSuitListId === this.GoodsList[index - 1].toSuitListId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}

.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.box-content{
  font-size: 15px;
}
</style>
